<template>
  <div class="app-container">
    <div class="head-container">
      <el-card v-for="(item, index) in boxList" :key="index" class="area">
        <div class="card_body">
          <div v-for="(item1, index1) in item" :key="index1" class="row">
            <div
              v-for="(item2, index2) in item1"
              :key="index2"
              class="floor"
              style="display: flex;flex-direction: column;gap: 20px;"
            >
              <!-- 第一层 -->
              <div style="display: flex;justify-content: space-evenly;align-items: center">
                <div style="width: 5vw;font-size: xx-large;font-weight: 600;text-align: center;">
                  上层
                </div>
                <el-popover
                  v-for="item3 in item2
                    .filter((val) => val.layer === 2)
                    .sort((a, b) => a.column - b.column)"
                  :key="item3.id"
                  placement="top-start"
                  trigger="hover"
                  title="储位信息"
                >
                  <div style="font-size: x-large;">
                    <div>储位编码：{{ item3.storageCode }}</div>
                    <div>
                      货位状态：{{
                        item3.locationInventoryStatus === 1 ? "有货" : "无货"
                      }}
                    </div>
                    <div>
                      载盘号: {{ item3.palletId ? item3.palletId : "无" }}
                    </div>
                    <div>
                      是否启用: {{ item3.status === 1 ? "启用" : "禁用" }}
                    </div>

                    <div v-if="item3.processcardCode">
                      批次号: {{ item3.processcardCode }}
                    </div>
                    <div v-if="item3.workNum">
                      工程号: {{ item3.workNum }}
                    </div>
                    <div v-if="item3.layerName">
                      压合层名: {{ item3.layerName }}
                    </div>
                    <div v-if="item3.size1">长度: {{ item3.size1 }}</div>
                    <div v-if="item3.size2">宽度: {{ item3.size2 }}</div>
                    <div v-if="item3.thick">厚度: {{ item3.thick }}</div>
                    <div v-if="item3.qty">数量: {{ item3.qty }}</div>
                  </div>
                  <el-button
                    slot="reference"
                    :type="
                      item3.locationInventoryStatus === 1 ? 'primary' : 'info'
                    "
                    :disabled="item3.status === 0 || item3.locationInventoryStatus === 0"
                    plain
                    size="medium"
                    style="width: 10vw;overflow: hidden;padding: 10px 5px;font-size: x-large;"
                    @click="outBoundConfirm(item3)"
                  >{{ item3.storageCode }}</el-button>
                </el-popover>
              </div>
              <!-- 第二层 -->
              <div style="display: flex;justify-content: space-evenly;align-items: center;">
                <div style="width: 5vw;font-size: xx-large;font-weight: 600;text-align: center;">
                  下层
                </div>
                <el-popover
                  v-for="item4 in item2
                    .filter(val => val.layer === 1)
                    .sort((a, b) => a.column - b.column)"
                  :key="item4.id"
                  placement="top-start"
                  trigger="hover"
                  title="储位信息"
                >
                  <div style="font-size: x-large;">
                    <div>储位编码：{{ item4.storageCode }}</div>
                    <div>
                      货位状态：{{
                        item4.locationInventoryStatus === 1 ? "有货" : "无货"
                      }}
                    </div>
                    <div>
                      载盘号: {{ item4.palletId ? item4.palletId : "无" }}
                    </div>
                    <div>
                      是否启用: {{ item4.status === 1 ? "启用" : "禁用" }}
                    </div>

                    <div v-if="item4.processcardCode">
                      批次号: {{ item4.processcardCode }}
                    </div>
                    <div v-if="item4.workNum">
                      工程号: {{ item4.workNum }}
                    </div>
                    <div v-if="item4.layerName">
                      压合层名: {{ item4.layerName }}
                    </div>
                    <div v-if="item4.size1">长度: {{ item4.size1 }}</div>
                    <div v-if="item4.size2">宽度: {{ item4.size2 }}</div>
                    <div v-if="item4.thick">厚度: {{ item4.thick }}</div>
                    <div v-if="item4.qty">数量: {{ item4.qty }}</div>
                  </div>
                  <el-button
                    slot="reference"
                    :type="
                      item4.locationInventoryStatus === 1 ? 'primary' : 'info'
                    "
                    :disabled="item4.status === 0 || item4.locationInventoryStatus === 0"
                    plain
                    size="medium"
                    style="width: 10vw;overflow: hidden;padding: 10px 5px;font-size: x-large;"
                    @click="outBoundConfirm(item4)"
                  >{{ item4.storageCode }}</el-button>
                </el-popover>
                <div v-if="item2.length > 10" style="width: 10vw;overflow: hidden;padding: 10px 5px;" />
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <!-- 表单 -->
      <el-dialog title="提示" :close-on-click-modal="false" :visible.sync="visible" width="500px" @close="handlerCancel">
        <el-form ref="formRef" :model="form" size="small" label-width="120px">
          <el-form-item label="点位">
            <el-select v-model="form.point" style="width: 250px;" placeholder="请选择">
              <el-option
                v-for="(item, index) in pointList"
                :key="index"
                :label="item.descript"
                :value="item.pointCode"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handlerCancel">取 消</el-button>
          <el-button type="primary" @click="handlerConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getListAPI, getPointAPI, createMissionAPI } from '@/api/createDeliveryOrder'

export default {
  name: 'CreateDeliveryOrder',
  data() {
    return {
      boxList: [
      // [
      //           [
      //               [
      //                   {
      //                       "column": 5,
      //                       "layer": 2,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 19.0,
      //                       "size2": 25.0,
      //                       "status": 0,
      //                       "storageCode": "S8_TOP",
      //                       "storageId": 1,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 5,
      //                       "layer": 1,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 17.0,
      //                       "size2": 22.0,
      //                       "status": 1,
      //                       "storageCode": "S8_BOTTOM",
      //                       "storageId": 2,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 4,
      //                       "layer": 2,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 17.0,
      //                       "size2": 19.0,
      //                       "status": 1,
      //                       "storageCode": "S9_TOP",
      //                       "storageId": 3,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 4,
      //                       "layer": 1,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 17.0,
      //                       "size2": 19.0,
      //                       "status": 1,
      //                       "storageCode": "S9_BOTTOM",
      //                       "storageId": 4,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 3,
      //                       "layer": 2,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 19.0,
      //                       "size2": 25.0,
      //                       "status": 1,
      //                       "storageCode": "S10_TOP",
      //                       "storageId": 5,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 3,
      //                       "layer": 1,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 17.0,
      //                       "size2": 19.0,
      //                       "status": 1,
      //                       "storageCode": "S10_BOTTOM",
      //                       "storageId": 6,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 2,
      //                       "layer": 2,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 17.0,
      //                       "size2": 19.0,
      //                       "status": 1,
      //                       "storageCode": "S11_TOP",
      //                       "storageId": 7,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 2,
      //                       "layer": 1,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 17.0,
      //                       "size2": 19.0,
      //                       "status": 1,
      //                       "storageCode": "S11_BOTTOM",
      //                       "storageId": 8,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 1,
      //                       "layer": 2,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 17.0,
      //                       "size2": 19.0,
      //                       "status": 1,
      //                       "storageCode": "S12_TOP",
      //                       "storageId": 9,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 1,
      //                       "layer": 1,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 0,
      //                       "size1": 17.0,
      //                       "size2": 19.0,
      //                       "status": 1,
      //                       "storageCode": "S12_BOTTOM",
      //                       "storageId": 10,
      //                       "zoneCode": "1"
      //                   },
      //                   {
      //                       "column": 6,
      //                       "layer": 2,
      //                       "locationInventoryStatus": 1,
      //                       "productType": "1",
      //                       "qty": 5,
      //                       "size1": 17.0,
      //                       "size2": 19.0,
      //                       "status": 1,
      //                       "storageCode": "S5_TOP",
      //                       "storageId": 11,
      //                       "zoneCode": "1"
      //                   }
      //               ]
      //           ],
      //           []
      //       ]
      ],
      visible: false,
      pointList: [],
      form: {
        point: ''
      },
      currentCode: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getListAPI()
      console.log(res)
      this.boxList = res.data.data
    },
    async outBoundConfirm(item) {
      this.currentCode = item.storageCode
      const res = await getPointAPI(item.storageCode)
      // console.log(res)
      if (res.meta.code === 200) {
        this.pointList = res.data.data
        this.visible = true
      } else {
        this.$message.warning(res.meta.msg)
      }
    },
    handlerCancel() {
      this.visible = false
      this.pointList = []
      this.form = {
        point: ''
      }
      this.currentCode = ''
    },
    async handlerConfirm() {
      const submitForm = {
        palletCode: this.currentCode,
        point: this.form.point,
        type: 1
      }
      const res = await createMissionAPI(submitForm)
      if (res.meta.code === 200) {
        this.$message.success('创建配送单成功')
        this.handlerCancel()
        this.getList()
      } else {
        this.$message.warning(res.meta.msg)
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
